"use client";
/**
 * StorefrontSignUpClient
 *
 * Custom email + password sign-up for the storefront.
 * Phone number is NEVER required. It is collected optionally on /activate/[orderId].
 *
 * Clerk v6 API (storefront uses @clerk/nextjs ^6):
 *   useSignUp()  → { signUp, isLoaded }
 *   useClerk()   → { setActive }
 */
import { useState, FormEvent } from "react";
import { useSignUp } from "@clerk/nextjs";
import { useClerk } from "@clerk/nextjs";
import { useSearchParams, useRouter } from "next/navigation";
import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
import { sanitizeAuthRedirect } from "@/lib/sanitize-auth-redirect";

type FlowStep = "credentials" | "verify" | "complete";

export function StorefrontSignUpClient() {
  const searchParams = useSearchParams();
  const rawRedirect = searchParams.get("redirect_url") ?? undefined;
  const redirectTarget = sanitizeAuthRedirect(rawRedirect, "/dashboard");

  const { signUp, isLoaded } = useSignUp();
  const { setActive } = useClerk();
  const router = useRouter();

  const [step, setStep] = useState<FlowStep>("credentials");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [code, setCode] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  function clerkErrMsg(err: unknown): string {
    const e = err as { errors?: Array<{ longMessage?: string; message?: string }> };
    return (
      e?.errors?.[0]?.longMessage ??
      e?.errors?.[0]?.message ??
      "Something went wrong. Please try again."
    );
  }

  async function handleCredentials(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!isLoaded || !signUp) return;
    setError(null);
    setLoading(true);
    try {
      await signUp.create({ emailAddress: email, password });
      await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
      setStep("verify");
    } catch (err) {
      setError(clerkErrMsg(err));
    } finally {
      setLoading(false);
    }
  }

  async function handleVerify(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!isLoaded || !signUp) return;
    setError(null);
    setLoading(true);
    try {
      const result = await signUp.attemptEmailAddressVerification({ code });
      const completion = await completeEmailSignUpAfterVerify(signUp, result);
      if (completion.status === "complete") {
        setStep("complete");
        await setActive({ session: completion.sessionId });
        router.replace(redirectTarget);
      } else {
        setError(completion.message);
      }
    } catch (err) {
      setError(clerkErrMsg(err));
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="w-full max-w-sm rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur">
      {step === "credentials" && (
        <>
          <h1 className="text-xl font-bold text-sand-900 dark:text-sand-50 mb-1">Create account</h1>
          <p className="text-xs text-sand-500 mb-6">Email and password — no phone required.</p>
          <form onSubmit={handleCredentials} className="space-y-4">
            <div>
              <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="sf-email">
                Email address
              </label>
              <input
                id="sf-email"
                type="email"
                autoComplete="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                placeholder="you@example.com"
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="sf-password">
                Password
              </label>
              <input
                id="sf-password"
                type="password"
                autoComplete="new-password"
                required
                minLength={8}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                placeholder="Min. 8 characters"
              />
            </div>
            {error && (
              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
                {error}
              </p>
            )}
            <button
              type="submit"
              disabled={loading || !isLoaded}
              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
            >
              {loading ? "Creating account…" : "Continue"}
            </button>
          </form>
          <p className="mt-4 text-center text-xs text-sand-400">
            Already have an account?{" "}
            <a href="/sign-in" className="text-[var(--brand-accent)] hover:underline">
              Sign in
            </a>
          </p>
        </>
      )}

      {step === "verify" && (
        <>
          <h1 className="text-xl font-bold text-sand-900 dark:text-sand-50 mb-1">Check your email</h1>
          <p className="text-xs text-sand-500 mb-6">
            We sent a 6-digit code to <span className="text-sand-600 dark:text-sand-300">{email}</span>.
          </p>
          <form onSubmit={handleVerify} className="space-y-4">
            <div>
              <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="sf-code">
                Verification code
              </label>
              <input
                id="sf-code"
                type="text"
                inputMode="numeric"
                autoComplete="one-time-code"
                required
                maxLength={6}
                value={code}
                onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
                className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-center text-lg tracking-[0.4em] text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                placeholder="000000"
              />
            </div>
            {error && (
              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
                {error}
              </p>
            )}
            <button
              type="submit"
              disabled={loading || code.length < 6}
              className="w-full rounded-lg bg-[var(--brand-accent)] py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
            >
              {loading ? "Verifying…" : "Verify email"}
            </button>
          </form>
          <button
            type="button"
            onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
            className="mt-4 w-full text-center text-xs text-sand-400 hover:text-sand-500"
          >
            ← Back
          </button>
        </>
      )}

      {step === "complete" && (
        <div className="text-center space-y-3 py-4">
          <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
          <p className="text-sm text-sand-600 dark:text-sand-400">Setting up your account…</p>
        </div>
      )}
    </div>
  );
}